<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/reverse.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>反向镂空区域</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 1000px;
        margin: 0px;
      }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <div
        ref="sctterMap"
        id="container"
        style="width: 100%; height: 500px; z-index: 1"
      ></div>
    </div>
    <script
      type="text/javascript"
      src="http://webapi.amap.com/maps?v=2.0&key=ca74977ff5e8b5756177d32d75f6e977&plugin=AMap.ControlBar,AMap.ToolBar,AMap.MouseTool"
    ></script>
    <!-- UI组件库 1.1 -->
    <script src="http://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          name: "", // 在这里定义 name 属性
          mapsDatas: [], //地图数据
      // date: [],
      date: "", //时间
      tempdate: [], //开始和结束时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }, //时间选择范围
      clickNum: 1,
      demoImg:"", //背景图
      imgSrc: null, //图片地址
      myChart: null, //筛选
      value: "海南省", //默认值
      geoJson: {
        features: [],
      }, //地图数据
      parentInfo: [
        {
          cityName: "海南省",
          code: 4600000,
        },
      ], //省
      mapData: [], //地图数据
        },
        created() {},
        mounted() {
          //创建地图
          var map = new AMap.Map("container", {
            cursor: "default",
            zoom: 4,
          });

          AMapUI.loadUI(["geo/DistrictExplorer"], function (DistrictExplorer) {
            initPage(DistrictExplorer);
          });

          function getAllRings(feature) {
            var coords = feature.geometry.coordinates,
              rings = [];

            for (var i = 0, len = coords.length; i < len; i++) {
              rings.push(coords[i][0]);
            }

            return rings;
          }

          function getLongestRing(feature) {
            var rings = getAllRings(feature);

            rings.sort(function (a, b) {
              return b.length - a.length;
            });

            return rings[0];
          }

          function initPage(DistrictExplorer) {
            //创建一个实例
            var districtExplorer = new DistrictExplorer({
              map: map,
            });

            var countryCode = 100000, //全国
              provCodes = [
                110000, //北京
                510000, //四川
              ],
              cityCodes = [
                230100, //哈尔滨
                331100, //丽水
              ];

            districtExplorer.loadMultiAreaNodes(
              //只需加载全国和市，全国的节点包含省级
              [countryCode].concat(cityCodes),
              function (error, areaNodes) {
                var countryNode = areaNodes[0],
                  cityNodes = areaNodes.slice(1);

                var path = [];

                //首先放置背景区域，这里是大陆的边界
                path.push(getLongestRing(countryNode.getParentFeature()));

                for (var i = 0, len = provCodes.length; i < len; i++) {
                  //逐个放置需要镂空的省级区域
                  path.push.apply(
                    path,
                    getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i]))
                  );
                }

                for (var i = 0, len = cityNodes.length; i < len; i++) {
                  //逐个放置需要镂空的市级区域
                  path.push.apply(
                    path,
                    getAllRings(cityNodes[i].getParentFeature())
                  );
                }

                //绘制带环多边形
                //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
                var polygon = new AMap.Polygon({
                  bubble: true,
                  lineJoin: "round",
                  strokeColor: "red", //线颜色
                  strokeOpacity: 1, //线透明度
                  strokeWeight: 1, //线宽
                  fillColor: "black", //填充色
                  fillOpacity: 0.65, //填充透明度
                  map: map,
                  path: path,
                });
              }
            );
          }
        },
        methods: {},
      });
    </script>
  </body>
</html>
